<template>
	<up-navbar :bgColor="bgColor" @leftClick="backPage" >
		<template #left>
			<view class="u-flex u-flex-items-center u-flex-center navbar">
				<text class="iconfont" v-if="back">&#xe60f;</text>
				<text class="page-name">{{ props.pageName }}</text>
				<text class="page-desc">{{ props.pageDesc }}</text>
			</view>
		</template>
	</up-navbar>
	<view :style="{
		marginTop: bottom + props.top +'px',
		padding: padding
	}">
		<slot name="area" />
	</view>
</template>

<script setup>
	const bottom = uni.getMenuButtonBoundingClientRect().bottom
	const props = defineProps({
		pageName: {
			type: String,
			default: 'TITEL'
		},
		pageDesc: {
			type: String,
			default: ''
		},
		bgColor: {
			type: String,
			default: '#f5f5f5'
		},
		back: {
			type: Boolean,
			default: true
		},
		top: {
			type: Number,
			default: 0
		},
		padding:{
			type: String,
			default: '0 22px 40px'
		}
		
	})

	const backPage = () => {
		uni.navigateBack()
	}
</script>


<style lang="scss" scoped>
	.navbar {
		padding-left: 10px;

		.iconfont {
			margin-right: 20px;
			font-size: 26px;
			font-weight: bolder;
		}

		.page-name {
			margin-right: 20px;
			font-size: 18px;
			font-weight: bolder;
			color: #000000;
		}
		
		.page-desc{	
			font-size: 14px;
			color: #939393;
		}
	}

	
</style>